<template>
  <div>
    <el-form ref="skuInfoRef" :model="skuInfo">
      <el-form-item label="SKU名称" prop="skuName" label-width="100px">
        <el-input style="width: 150px" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price" label-width="100px">
        <el-input style="width: 150px" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量" prop="weight" label-width="100px">
        <el-input style="width: 150px" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="SKU描述" prop="skuDesc" label-width="100px">
        <el-input v-model="skuInfo.skuDesc" type="textarea"></el-input>
      </el-form-item>
      <el-form-item
        label="平台属性"
        prop="skuAttrValueList"
        label-width="100px"
      >
        <div
          v-for="(item, idx) in platAttrInfo"
          style="display: flex; align-items: center; height: 47px; width: 300px"
        >
          <span
            style="
              margin-right: 5px;
              margin-top: 1px;
              font-weight: 300;
              width: 70px;
              text-align: right;
            "
            >{{ item.attrName }}</span
          >
          <el-select
            style="width: 240px; margin-right: 40px; height: 30px"
            v-model="selectedIdx[idx]"
          >
            <el-option
              v-for="attrVal in item.attrValueList"
              :label="attrVal.valueName"
              :key="attrVal.id"
              :value="attrVal.id"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item
        label="销售属性"
        prop="skuSaleAttrValueList"
        label-width="100px"
      >
        <div
          v-for="(item, idx) in spuInfo.spuSaleAttrList"
          style="display: flex; align-items: center; height: 47px; width: 300px"
        >
          <span
            style="
              margin-right: 5px;
              margin-top: 1px;
              font-weight: 300;
              width: 70px;
              text-align: right;
            "
            >{{ item.saleAttrName }}</span
          >
          <el-select
            style="width: 240px; margin-right: 40px; height: 30px"
            v-model="selectedIdxOfSales[idx]"
          >
            <el-option
              v-for="attrVal in item.spuSaleAttrValueList"
              :label="attrVal.saleAttrValueName"
              :key="attrVal.id"
              :value="attrVal.id"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="图片名称" prop="skuImageList" label-width="100px">
        <el-table
          border
          ref="multipleTableRef"
          style="width: 100%; margin: 15px 0"
          :data="spuInfo.spuImageList"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectable"
          />
          <el-table-column label="图片" width="150" align="center">
            <template #="{ row, $index }">
              <img
                :src="row.imgUrl"
                style="width: 100px; height: 100px; background-size: cover"
              />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" align="center" />
          <el-table-column label="操作" align="center">
            <template #="{ row, $index }">
              <el-button
                :icon="imgButtons[$index].flag ? '' : 'Plus'"
                type="primary"
                @click="toggleSelection(row, $index)"
                :disabled="imgButtons[$index].flag"
                >{{
                  imgButtons[$index].flag ? "默认图片" : "设为默认"
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <div>
        <el-button type="primary" @click="saveSkuInfo">保存</el-button>
        <el-button @click="cancelEditSkuInfo">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, reactive, ref } from "vue";
import useCategoryStore from "../../../store/modules/category";
import { reqAttrInfo } from "../../../api/product/attr";
import { SpuInfoDataForm } from "../../../api/product/spu/type";
import { reqSpuInfoById } from "../../../api/product/spu";
import { endLoading, startLoading } from "../../../utils/loading";
import { reqSaveSkuInfo } from "../../../api/product/sku";
const props = defineProps({
  spuId: {
    type: Number,
    required: true,
  },
});
const selectArr = ref<any>([]);
const selectedIdx = ref<any>([]);
const selectedIdxOfSales = ref<any>([]);
const platAttrInfo = ref<any>([]);
const multipleTableRef = ref<any>();
const imgButtons = reactive([]);
const skuInfo = reactive<any>({
  skuName: "",
  price: 1,
  weight: 1,
  skuDesc: "",
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuImageList: [],
  spuId: "",
  category3Id: "",
  skuDefaultImg: "",
  isSale: 1,
  tmId: 2,
});
const defaultImgId = ref();

let spuInfo = reactive<SpuInfoDataForm>({
  imgFileList: [],
  spuName: "",
  description: "",
  spuImageList: [],
  spuSaleAttrList: [],
  category3Id: "",
});

const categoryStore = useCategoryStore();
const emit = defineEmits(["change-scene"]);
const saveSkuInfo = async () => {
  skuInfo.spuId = spuInfo.id;
  skuInfo.category3Id = spuInfo.category3Id;

  selectedIdx.value.forEach((valueId: any, idx: number) => {
    if (valueId != "") {
      let attrValueInfo = platAttrInfo.value[idx].attrValueList.find(
        (item: any) => item.id === valueId
      );
      skuInfo.skuAttrValueList.push({
        attrId: platAttrInfo.value[idx].id,
        valueId: valueId,
        attrName: platAttrInfo.value[idx].attrName,
        valueName: attrValueInfo.valueName,
      });
    }
  });
  selectedIdxOfSales.value.forEach((id: any, idx: number) => {
    if (id !== "") {
      let spuSaleAttrValue = spuInfo.spuSaleAttrList[
        idx
      ].spuSaleAttrValueList.find((item: any) => (item.id = id));
      skuInfo.skuSaleAttrValueList.push({
        spuId: spuInfo.id,
        saleAttrValueId: id,
        saleAttrId: spuInfo.spuSaleAttrList[idx].baseSaleAttrId,
        saleAttrName: spuInfo.spuSaleAttrList[idx].saleAttrName,
        saleAttrValueName: spuSaleAttrValue.saleAttrValueName,
      });
    }
  });
  let selectedImg = multipleTableRef.value.getSelectionRows();
  selectedImg.forEach((item: any) => {
    if (item.id === defaultImgId.value) {
      item.isDefault = "1";
      skuInfo.skuDefaultImg = item.imgUrl;
    } else item.isDefault = "0";
    skuInfo.skuImageList.push({
      imgName: item.imgName,
      imgUrl: item.imgUrl,
      spuImgId: item.id,
      isDefault: item.isDefault,
    });
  });
  console.log(skuInfo);
  let result = await reqSaveSkuInfo(skuInfo);
  console.log(result);
  emit("change-scene", 1);
};
const cancelEditSkuInfo = () => {
  console.log(multipleTableRef.value.getSelectionRows());
  emit("change-scene", 1);
};

onMounted(async () => {
  startLoading();
  let result = await reqAttrInfo(
    categoryStore.c1Id as number,
    categoryStore.c2Id as number,
    categoryStore.c3Id as number
  );
  platAttrInfo.value = result.data;
  platAttrInfo.value.forEach((item: any) => {
    selectedIdx.value.push("");
  });
  // console.log(props.spuId);

  let result2 = await reqSpuInfoById(props.spuId);
  Object.assign(spuInfo, result2.data);
  spuInfo.spuSaleAttrList.forEach(() => {
    selectedIdxOfSales.value.push("");
  });
  console.log(spuInfo);
  // 为所有spu图片配置名字和是否disabled
  spuInfo.spuImageList.forEach((item: any) => {
    imgButtons.push({ name: item.imgName, flag: false });
  });
  endLoading();
});
const toggleSelection = (row: any, idx: number) => {
  imgButtons.forEach((item: any) => {
    item.flag = false;
  });
  imgButtons[idx].flag = true;
  defaultImgId.value = row.id;
  if (
    !multipleTableRef.value
      .getSelectionRows()
      .find((item: any) => item.id === row.id)
  ) {
    multipleTableRef.value!.toggleRowSelection(row);
  }

  // console.log(multipleTableRef.value.getSelectionRows());
};

const selectable = (row: any, index: number) => {
  return !imgButtons[index].flag;
};
</script>

<style lang="scss" scoped></style>
